<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <div class="container" style="max-width:600px">
            名字
            <input type="text" v-model='item.itemName' class="form-control">
            数量
            <input type="text" v-model.number="item.itemNum" class="form-control">
            价格
            <input type="text" v-model="item.itemPrice" class="form-control">
            <button class="btn" @click="addItem">添加商品</button>
            <table class="table table-condensed table-bordered table-hover">
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in carts.lists">
                    <td>
                        <input type="checkbox" 
                            v-model="item.isChecked"
                            @change="singleChecked"
                        >
                        {{item.itemName}}
                      
                    </td>
                    <td>￥{{item.itemPrice}}</td>
                    <td>
                        <button class="btn btn-xs" @click="reduceNum(index)">-</button>
                        <span>{{item.itemNum}}</span>
                        <button class="btn btn-xs" @click="addNum(index)">+</button>
                    </td>
                    <td>{{ (item.itemPrice*item.itemNum).toFixed(2) }}</td>
                    <td>
                        <button class="btn btn-danger" @click="delItem(index)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td v-show="!carts.lists.length" colspan="5" class="text-center">
                        暂无商品，请前往添加
                    </td>
                </tr>
            </table>
            <div>
                全选：<input type="checkbox" 
                        @change="allChecked"
                    v-model="carts.isAllChecked">
                总价：
                <span>{{  carts.total }}</span>
            </div>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                item:{
                    itemName:"",
                    itemNum:0,
                    itemPrice:0
                },
                carts:{
                    isAllChecked:true,
                    total:0,
                    lists:[
                        
                    ]
                }
            },
            mounted(){
                this.calcTotal();
            },
            methods:{
                addItem(){
                    // 添加商品
                    // console.log(this.item);
                     /* this.carts.lists.push({
                        ...this.item,
                        isChecked:true
                    });  */

                    let item = JSON.parse(JSON.stringify(this.item));
                    this.carts.lists.push({
                        ...item,
                        isChecked:true
                    })
                    // this.item.isChecked = true;
                    // this.carts.lists.push(this.item);
                },
                allChecked(){
                    // 全选和取消全选
                    // console.log(this.carts.isAllChecked)
                    this.carts.lists.forEach(el=>{
                        el.isChecked = this.carts.isAllChecked;
                    })
                    this.calcTotal();

                },
                singleChecked(){
                   
                    this.calcTotal();
                    /* 
                    判断是不是所有的商品都被选中了，只要有一个没有选中
                    就 让全选取消选中
                    否则 全选 变成选中状态
                     */
                    /* let item = this.carts.lists.findIndex(el=>!el.isChecked);
                    console.log(item); */
                    let isAllChecked = this.carts.lists.every(el=>el.isChecked);
                    this.carts.isAllChecked = isAllChecked;
                    /* 
                     let item = this.carts.lists.find(function(el,index){
                        //return el.isChecked === false
                         return !el.isChecked
                     });
                     */
                },
                delItem(i){
                    // 删除商品
                    if(confirm("确认删除吗")){
                        this.carts.lists.splice(i,1);
                        this.calcTotal();
                    }
                },
                reduceNum(i){
                    // 商品数量 -
                     // 添加商品数量
                     this.carts.lists[i].itemNum--;
                     if(this.carts.lists[i].itemNum<=1){
                        this.carts.lists[i].itemNum = 1
                     }
                    // 重新计算总价格
                    this.calcTotal();
                   
                },
                addNum(i){
                    // 添加商品数量
                    this.carts.lists[i].itemNum++;
                    // 重新计算总价格
                    this.calcTotal();
                },
                calcTotal(){
                    /* 
                    总价格：
                        所有的 选中 的商品的 单价*数量的总和
                     */
                     let checkedItems = this.carts.lists.filter(el=>el.isChecked);
                     this.carts.total = 0;
                     checkedItems.forEach(item=>{
                         this.carts.total += item.itemNum*item.itemPrice;
                     })
                     this.carts.total = parseFloat( this.carts.total.toFixed(2) );
                     /* 
                     var checkedItems = this.carts.lists.filter(function(el,index){
                         return el.isChecked;
                     });
                      */

                }
            }
        })
    </script>
</body>
</html>